
$(function(){
  var page = 1;
  var pageSize = 2;
  var img = [];
  render();
  function render(){
    $.ajax({
      url:'/product/queryProductDetailList',
      type:'get',
      data:{
        page:page,
        pageSize:pageSize
      },
      success:function(info){
        console.log(info);
        $("tbody").html(template("tmp",info));
        $("#paginator").bootstrapPaginator({
          bootstrapMajorVersion:3,
          currentPage:page,
          totalPages:Math.ceil(info.total / info.size),
          onPageClicked:function(a,b,c,p){
            page = p;
            render();
          }
        })
      }
    })

  }

  $(".btn_add").on("click",function(){
    $("#addModal").modal("show");
    $.ajax({
      url:'/category/querySecondCategoryPaging',
      type:'get',
      data:{
        page:1,
        pageSize:100
      },
      success:function(info){
        console.log(info);
        $(".dropdown-menu").html(template("tmp2",info));
        
      }
    })
  })

  // 二级菜单选择
  $(".dropdown-menu").on("click","a",function(){
    $(".dropdown-text").html($(this).html());
    $("[name = brandId]").val($(this).data("id"));
    $("form")
    .data('bootstrapValidator')
    .updateStatus("brandId", "VALID")

  })

  // 图片上传
  $("#file").fileupload({ 
       dataType:"json",  
      //e：事件对象   
      //data：图片上传后的对象，通过e.result.picAddr可以获取上传后的图片地址  
       done:function (e, data) {    
            console.log(data); 
         if(img.length >= 3){
          alert("只能上传3张图片");
          return;
         }
         $(
          '<img src="' + data.result.picAddr + '" width="100" height="100">'
        ).appendTo('.img_box');

        img.push(data.result);
        if(img.length === 3){
          $("form")
          .data('bootstrapValidator')
          .updateStatus("picStatus", "VALID");
        }else{
          $("form")
          .data('bootstrapValidator')
          .updateStatus("picStatus", "INVALID");
        }

     }});

      
    //使用表单校验插件
    $('form').bootstrapValidator({
      // 让隐藏表单也参与校验
      excluded: [],
      // 配置的校验的小图标
      feedbackIcons: {
        valid: 'glyphicon glyphicon-thumbs-up',
        invalid: 'glyphicon glyphicon-thumbs-down',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        brandId: {
          validators: {
            notEmpty: {
              message: '请选择二级分类'
            }
          }
        },
        proName: {
          validators: {
            notEmpty: {
              message: '商品名称不能为空'
            }
          }
        },
        proDesc: {
          validators: {
            notEmpty: {
              message: '商品描述不能为空'
            }
          }
        },
        num: {
          // 必须是1-99999之间的有效数字
          validators: {
            notEmpty: {
              message: '商品库存不能为空'
            },
            // 正则校验
            regexp: {
              regexp: /^[1-9]\d{0,4}$/,
              message: '请输入有效的库存(1-99999)'
            }
          }
        },
        size: {
          validators: {
            notEmpty: {
              message: '商品尺码不能为空'
            },
            //
            regexp: {
              regexp: /^\d{2}-\d{2}$/,
              message: '请输入正确的尺码格式(xx-xx)'
            }
          }
        },
        oldPrice: {
          validators: {
            notEmpty: {
              message: '商品原价不能为空'
            }
          }
        },
        price: {
          validators: {
            notEmpty: {
              message: '商品价格不能为空'
            }
          }
        },
        picStatus: {
          validators: {
            notEmpty: {
              message: '请上传3张商品图片'
            }
          }
        }
      }
    })

    $("form").on('success.form.bv', function (e) {
      e.preventDefault();
      //使用ajax提交逻辑
      var content = $("form").serialize();
      content += '&picName1='+img[0].picAddr+'&picAddr1='+img[0].picName;
      content += '&picName2='+img[1].picAddr+'&picAddr2='+img[1].picName;
      content += '&picName3='+img[2].picAddr+'&picAddr3='+img[2].picName;
      $.ajax({
        url:'/product/addProduct',
        type:'post',
        data:content,
        success:function(info){
          console.log(info);
          if(info.success){
            page = 1;
            render();
            $("#addModal").modal("hide");
            $("form")
            .data('bootstrapValidator')
            .resetForm(true);
            img = [];
            $(".dropdown-text").html("请选择二级分类");
            $(".img_box img").remove();
          }
          
        }
      })
  });

})